<!--
 * @Author: lz08 liuzheng@ceepower.com
 * @Date: 2022-11-30 15:43:33
 * @LastEditors: lz08 liuzheng@ceepower.com
 * @LastEditTime: 2022-11-30 16:27:54
 * @FilePath: \vue3-ts-cms\src\components\lz-input\Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="mx-auto max-w-xs">
    <input
      class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
      type="email"
      placeholder="账户名称"
      v-model="userInfo.username"
    />
    <input
      class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
      type="password"
      placeholder="密码"
      v-model="userInfo.password"
    />
    <button @click="login"
      class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
    >
      <span class="ml-3">登 录</span>
    </button>
    <p class="mt-6 text-xs text-gray-600 text-center">
      我同意并遵守服务协议
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRef, toRefs } from 'vue';
export default defineComponent({
  setup(prop,ctx){
    let userData = reactive({
      userInfo:{
        username:"",
        password:""
      }
    })
    function login(){
      ctx.emit("login",userData.userInfo)
    }
    return { login, ...toRefs(userData) }
  }
})
</script>

<style>

</style>